import React from 'react';
// import ReactDOM from "react-dom";
import root from "../index.js";

// class Demo extends React.Component {
//     state={
//         count:0
//     };
//     addCount=()=>{
//         const {count} = this.state;
//         this.setState({
//             count:count+1
//         });

//     };
//     render() {
//         return (
//             <div>
//                 <h1>当前的求和为：{this.state.count}</h1>
//                 <br />
//                 <button onClick={this.addCount}>点我加1</button>
//             </div>
//         );
//     };
// };

function Demo(){
    const [count,setCount] = React.useState(0);
    const [name,setName] = React.useState("Scout");
    const myRef = React.useRef();
    function addCount(){
        // setCount(count+1);
        setCount((count)=>{return count+1});
    };
    function changeName(){
        setName("EDGQilin"+Math.random());
    };
    React.useEffect(()=>{
        // console.log("@@@");
        let timer=setInterval(()=>{
            setCount((count)=>{return count+1});
        },1000);
        return ()=>{
            clearInterval(timer);
        }
    },[count,name]);
    function unmount(){
        root.unmount(document.getElementById("root"));
    };
    function show(){
        alert(myRef.current.value);
    };
    return (
        <div>
            <h1>当前的求和为：{count}</h1>
            <h1>当前的姓名为：{name}</h1>
            <input type="text" ref={myRef} />
            <br />
            <button onClick={addCount}>点我加1</button>
            <button onClick={changeName}>点我改名</button>
            <button onClick={unmount}>点我卸载组件</button>
            <button onClick={show}>点我显示数据</button>
        </div>
    );
};

export default Demo;